<template>
    <fieldset>
        <legend>setup钩子</legend>
        <!-- <h1>{{num}}</h1> -->
        <h2>{{num2}}</h2>
        <h3>{{aa}}</h3>
        <h4>{{msg}}</h4>
    </fieldset>
</template>
<script>
import {toRefs} from "vue"
    export default {
        props:['num'],
        // setup钩子是vue3新增的钩子，在beforeCreate喝created之前执行
        // setup钩子不会因为props的变化而重新调用
        // setuo这个钩子的返回值是直接给模板使用的
        setup(props,context){
            // console.log(props.num)
            // console.log(context);
            // let {num} =props;

            // 使用es6语法解构props会失去props响应式
            // 使用toRefs来保持响应
            let {num} = toRefs(props)

            // console.log(this);
            
            // 在setup中可以获取组件实例

            

            return {
                num2:num,
                aa:999
            }
        },
        data(){
            return {
                msg:"ikun"
            }
        }
    }
</script>